<!--  -->
<template>
  <div class="home">
    <header>
      <div class="imgs">
        <h3 class="logo">直播电商</h3>
        <div class="search-shou">
          <van-icon name="search" class="fangdajing" />
          <input type="text" placeholder="请搜索商品" />
        </div>
      </div>
      <div class="tab">
        <van-tabs class="tabs" color="#fff">
          <van-tab title="首页"></van-tab>
          <van-tab title="每日新品"></van-tab>
          <van-tab title="热门推荐"></van-tab>
          <van-tab title="家用电器"></van-tab>
          <van-tab title="美妆个护"></van-tab>
        </van-tabs>
      </div>
    </header>

    <main>
      <div class="swiper">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item
            ><img src="../../images/u5738.jpg" alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img src="../../images/demo-1_爱奇艺.jpg" alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img src="../../images/demo-2_爱奇艺.jpg" alt=""
          /></van-swipe-item>
        </van-swipe>
      </div>
      <div class="box">
        <dl>
          <dt><img src="../../images/small_03.jpg" alt="" /></dt>
          <dd>商品分类</dd>
        </dl>
        <dl>
          <dt><img src="../../images/small_05.jpg" alt="" /></dt>
          <dd>领优惠卷</dd>
        </dl>
        <dl>
          <dt><img src="../../images/small_07.jpg" alt="" /></dt>
          <dd>行业咨询</dd>
        </dl>
        <dl>
          <dt><img src="../../images/small_09.jpg" alt="" /></dt>
          <dd>我要签到</dd>
        </dl>
        <dl>
          <dt><img src="../../images/small_11.jpg" alt="" /></dt>
          <dd>我的收藏</dd>
        </dl>
        <dl @click="handleGroup()">
          <dt><img src="../../images/small_18.jpg" alt="" /></dt>
          <dd>拼团活动</dd>
        </dl>
        <dl>
          <dt>
            <img
              src="../../images/small_19.jpg"
              alt=""
              @click="$router.push('/seckill')"
            />
          </dt>
          <dd>秒杀活动</dd>
        </dl>
        <dl>
          <dt>
            <img src="../../images/small_20.jpg" alt="" @click="tokj()" />
          </dt>
          <dd>砍价活动</dd>
        </dl>
        <dl>
          <dt>
            <img
              src="../../images/small_21.jpg"
              alt=""
              @click="$router.push('/streaming')"
            />
          </dt>
          <dd>直播特卖</dd>
        </dl>
        <dl>
          <dt><img src="../../images/small_22.jpg" alt="" /></dt>
          <dd>订单管理</dd>
        </dl>
      </div>
      <div class="chaozhi">
        <div class="chaozhi-a">
          <p>
            <b>超值爆款</b>
            <span>美好生活由此开始</span>
          </p>
        </div>
        <div class="chaozhi-b">
          <dl class="chaozhidl">
            <dt>
              <h3>促销商品</h3>
              <p class="info">多买多省</p>
              <b class="color">
                <b class="size">GO!</b>
                <span>></span>
              </b>
            </dt>
            <dd>
              <img src="../../images/u1.jpg" alt="" />
            </dd>
          </dl>
          <dl>
            <dt>
              <h3>精品推荐</h3>
              <p class="info">精品推荐</p>
              <b class="color1">
                <b class="size">GO!</b>
                <span>></span>
              </b>
            </dt>
            <dd>
              <img src="../../images/u1.jpg" alt="" />
            </dd>
          </dl>
          <dl class="chaozhidl">
            <dt>
              <h3>热门榜单</h3>
              <p class="info">热门榜单</p>
              <b class="color2">
                <b class="size">GO!</b>
                <span>></span>
              </b>
            </dt>
            <dd>
              <img src="../../images/u1.jpg" alt="" />
            </dd>
          </dl>
          <dl class="chaozhidl">
            <dt>
              <h3>首发新品</h3>
              <p class="info">首发新品</p>
              <b class="color3">
                <b class="size"> GO!</b>
                <span>></span>
              </b>
            </dt>
            <dd>
              <img src="../../images/u1.jpg" alt="" />
            </dd>
          </dl>
        </div>
      </div>
      <div class="price">
        <div class="pricea">
          <h3>砍价活动</h3>
          <span>更多></span>
        </div>

        <div class="priceb">
          <dl>
            <dt><img src="../../images/1.20210323144227.png" alt="" /></dt>
            <dd>现货发顺丰</dd>
            <span><b>￥88.00</b></span>
          </dl>

          <dl>
            <dt><img src="../../images/2.20210323144227.png" alt="" /></dt>
            <dd>Apple/苹果iphone</dd>
            <span><b>￥1.00</b></span>
          </dl>
        </div>
      </div>

      <div class="swiper1">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item
            ><img src="../../images/3.png" alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img src="../../images/demo-1_爱奇艺.jpg" alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img src="../../images/demo-2_爱奇艺.jpg" alt=""
          /></van-swipe-item>
        </van-swipe>
      </div>

      <div class="price">
        <div class="pricea">
          <h3>限时秒杀</h3>
          <span>更多></span>
        </div>
        <div class="priceb">
          <dl>
            <dt><img src="../../images/1.20210323144227.png" alt="" /></dt>
            <dd>现货发顺丰</dd>
            <span><b>￥88.00</b></span>
          </dl>

          <dl>
            <dt><img src="../../images/2.20210323144227.png" alt="" /></dt>
            <dd>Apple/苹果iphone</dd>
            <span><b>￥1.00</b></span>
          </dl>
        </div>
      </div>
      <div class="price">
        <div class="pricea">
          <h3>拼团惠</h3>
          <span>更多></span>
        </div>

        <div class="priceb">
          <dl>
            <dt><img src="../../images/1.20210323144227.png" alt="" /></dt>
            <dd>现货发顺丰</dd>
            <span><b>￥88.00</b></span>
          </dl>

          <dl>
            <dt><img src="../../images/2.20210323144227.png" alt="" /></dt>
            <dd>Apple/苹果iphone</dd>
            <span><b>￥1.00</b></span>
          </dl>
        </div>
      </div>

      <div class="navBox">
        <div class="nav">
          <div v-for="(item, ind) in list" :key="ind" @click="tarFn(item, ind)">
            <div>
              {{ item.xx }}
            </div>
          </div>
        </div>
        <div class="content">
          <dl v-for="(item, ind) in conList" :key="ind">
            <dt><img src="../../images/x1.png" alt="" /></dt>
            <dd>
              <p class="biaoti">{{ item.title }}</p>
              <p class="jiage">￥{{ item.price }}.00</p>
            </dd>
          </dl>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
// 1
import axios from "axios";
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState(["list", "conList"]),
  },
  methods: {
    tokj() {
      if (localStorage.getItem("area")) {
        this.$router.push("/examine");
      } else {
        this.$router.push("/bargain");
      }
    },
    tarFn(item, ind) {
      console.log(item, ind);
      this.$store.dispatch("conList", item.children);
    },
    goDetail(id) {
      this.$router.push(`/detail/${id}`);
    },
    handleGroup() {
      this.$router.push({ path: "/group" }); //去往拼团页面
    },
  },
  created() {
    axios("/api/mock").then((res) => {
      console.log(res.data.navlist);
      this.$store.dispatch("getList", res.data.navlist);
      this.$store.dispatch("conList", res.data.navlist[0].children);
    });
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
}
main {
  flex: 1;
  width: 100%;
  background: #eee;
}
header {
  width: 100%;
  height: 7rem;
  background: #f92d2e;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
/deep/.van-tabs__nav {
  background: #f92d2e;
}
/deep/.van-tab__text {
  color: #fff;
}
.imgs {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  padding: 0 20px;
}
.logo {
  color: white;
  margin-right: 25px;
}

.search-shou {
  width: 250px;
  height: 25px;
  border: 1px solid #ccc;
  font-size: 17px;
  border-radius: 50px;
  text-align: center;
  background: white;
  display: flex;
  align-items: center;
}
.fangdajing {
  text-indent: 5px;
  margin-right: 5px;
}
.search-shou input {
  width: 80%;
  border: none;
}
.my-swipe .van-swipe-item {
  width: 100%;
  color: #fff;
  font-size: 20px;
  text-align: center;
  img {
    width: 25rem;
    height: 25vh;
    border-radius: 30px;
  }
}

.chaozhi {
  width: 90%;
  background: #ffe3e5;
  border-radius: 15px;
  margin: 0 auto;
  padding: 20px 10px;
}

.chaozhi-a {
  b {
    color: #f92d2e;
    font-weight: bold;
    font-size: 20px;
    margin: 5px 5px;
  }
  span {
    margin: 5px 10px;
    background: #f66a2b;
    border-radius: 5px;
    font-size: 15px;

    color: #fff6f2;
  }
}
.chaozhi-b {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  dl {
    width: 48%;
    display: flex;
    justify-content: space-between;
    height: 30%;
    background: white;
    margin: 5px 3px;
    border-radius: 7px;
    dd {
      width: 50%;
      flex-shrink: 0;
      img {
        width: 80px;
        height: 70px;
      }
    }
    dt {
      flex: 1;
    }
  }
}
.box {
  width: 90%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 10px 25px;
  dt {
    margin: 0 15px;
  }
  dd {
    font-weight: bold;
    font-size: 15px;
    margin: 0 5px;
  }
}

.price {
  width: 90%;
  height: auto;
  background: #ffffff;
  margin: 0 auto;
  padding: 20px 10px;
  margin: 20px auto;
  border-radius: 15px;
  .pricea {
    display: flex;
    justify-content: space-between;

    h3 {
      color: #c95646;
    }
    span {
      color: #808080;
    }
  }
  .priceb {
    display: flex;
    dl {
      margin: 20px 5px;
      dd {
        font-size: 15px;
        font-weight: bold;
      }
      span {
        color: #ee5d55;
      }
    }
  }
}
.nav {
  display: flex;
  justify-content: space-around;
  padding: 10px 30px;
}
.content {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.content dl {
  width: 50%;
  display: flex;
  flex-direction: column;
  img {
    width: 90%;
    margin: 5px 10px;
  }
  dd {
    .biaoti {
      font-size: 15px;
      color: #686667;
      font-weight: bold;
    }
    .jiage {
      font-size: 20px;
      font-weight: bold;
      color: #c4443d;
    }
  }
}
.info {
  font-size: 10px;
  font-weight: bold;
  color: #cbcbcd;
}
.color {
  background: #338cea;
  border-radius: 7px;
  text-align: center;

  .size {
    font-size: 10px;
    color: #fefaee;
  }
  span {
    color: #b8b8b8;
  }
}
.color1 {
  background: #fc6a2f;
  border-radius: 7px;
  text-align: center;
  .size {
    font-size: 10px;
    color: #fefaee;
  }
  span {
    color: #fefaee;
  }
}
.color2 {
  background: #63d349;
  border-radius: 7px;
  text-align: center;
  .size {
    font-size: 10px;
    color: #fefaee;
  }
  span {
    color: #fefaee;
  }
}

.color3 {
  background: #feaa2d;
  border-radius: 7px;
  text-align: center;
  .size {
    font-size: 10px;
    color: #fefaee;
  }
  span {
    color: #fefaee;
  }
}
</style>
